<template>
  <div>
    <VueEasyLightbox
        :visible="visible"
        :imgs="handledImage"
        v-model:index="handledIndex"
        @hide="visible=false"
        :zoomScale="0.5"
    ></VueEasyLightbox>
  </div>

</template>

<script setup lang="ts">
import VueEasyLightbox from 'vue-easy-lightbox'
import {computed, ref} from "vue";
import {useUserStore} from "@/store/user";
import {storeToRefs} from "pinia";

const visible = ref(false)
const userStore = useUserStore()
const {token} = storeToRefs(userStore);
const props = defineProps({
  images: {
    type: Array,
    default: () => []
  },
  index: {
    type: Number,
    default: 1
  }
})
const emits = defineEmits(['update:index'])
const handledImage = computed(() => {
  return props.images.map((item: any) => {
    return {
      src: item + '?Authorization=' + token.value
    }
  })
})
const handledIndex = ref(0)

const doShow = (idx: any) => {
  console.log(props.images)
  visible.value = true
  handledIndex.value = idx
}

defineExpose({
  doShow
})

</script>